<template>
  <div class="my-favorites">
    <div >
      <van-nav-bar title="收藏列表" left-arrow @click-left="$router.back()" />
      <van-swipe-cell
        class="fa-item"
        v-for="item in favoritesList"
        :key="item.houseCode"
      >
        <van-card
          @click="goDetail(item.houseCode)"
          :desc="item.desc"
          :title="item.title"
          class="goods-card"
          :thumb="'http://liufusong.top:8080' + item.houseImg"
        >
          <template #tags>
            <span class="tag">
              {{ item.tags[0] }}
            </span>
          </template>
          <template #price>
            <div class="price">
              <span class="price-num">
                {{ item.price }}
              </span>
              元/月
            </div>
          </template>
        </van-card>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { getUserFavorites } from '@/api/user.js'
import { mapState } from 'vuex'

export default {
  name: 'favorites',
  data () {
    return {
      favoritesList: []
    }
  },
  created () {
    this.loadFavorites()
  },
  computed: {
    ...mapState(['user', 'code'])
  },
  methods: {
    async loadFavorites () {
      try {
        const res = await getUserFavorites(this.user.token)
        // console.log(res)
        this.favoritesList = res.data.body
      } catch (err) {
        console.log(err)
      }
    },
    goDetail (code) {
      this.$store.commit('setCode', code)
      this.$router.push('/detail')
    }
  }
}
</script>

<style scoped lang="less">
.my-favorites {
  .van-nav-bar {
    background-color: #21b97a;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
    /deep/ .van-icon {
      color: #fff;
    }
  }
  /deep/.fa-item {
    .van-card__title {
      margin: 0;
      font-size: 15px;
      color: #394043;
    }
    .van-card__desc {
      font-size: 12px;
      color: #afb2b3;
    }
    .tag {
      color: #39becd;
      background: #e1f5f8;
    }
    .price {
      font-size: 12px;
      color: #fa5741;
      .price-num {
        font-size: 16px;
        font-weight: bolder;
      }
    }
  }
}
</style>
